<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button style="float: right" type="primary" @click="editProfile">编辑信息</el-button>
      </div>
      <div class="info-container">
        <div class="info-item">
          <span class="info-label">昵称：</span>
          <span class="info-value">{{ info.name }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">电话：</span>
          <span class="info-value">{{ info.phone }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">邮箱：</span>
          <span class="info-value">{{ info.email }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">投资目标：</span>
          <span class="info-value">{{ info.rate }}</span>
        </div>

        <div class="info-item">
          <span class="info-label">风险承受：</span>
          <span class="info-value">{{ info.risk }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElButton, ElCard } from 'element-ui'

export default {
  name: 'Profile',
  components: {
    ElButton,
    ElCard
  },
  data() {
    return {
      info: {
        name: localStorage.getItem('nickname'),
        email: localStorage.getItem('email'),
        phone:localStorage.getItem('phone'),
        rate:localStorage.getItem('rate')==='low'?'保守型':localStorage.getItem('rate')==='mid'?'稳健型':'进取型',
        risk:localStorage.getItem('risk')==='low'?'保守型':localStorage.getItem('risk')==='mid'?'稳健型':'进取型'
      }
    }
  },
  mounted() {
    this.$message.warning("此页面在施工中...")
  },
  methods: {
    editProfile() {
      // 跳转到编辑页面
      this.$message.warning('暂不支持编辑，正在开发中...')
    }
  }
}
</script>